<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8" />
	<title>姓名案例_watch实现</title>
	<script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
	<!-- 
		监视属性watch：
			1.当被监视的属性变化时, 回调函数自动调用, 进行相关操作
			2.属性必须存在，才能进行监视！！
			3.监视的两种写法：
				(1).new Vue时传入watch配置
				(2).通过vm.$watch监视
		computed和watch之间的区别：
			1.只要是computed能完成的功能，watch都可以完成
			2.watch能完成的功能，computed不一定能完成，例如：watch可以进行异步操作
		备注：
			1.所有被Vue所调用（管理）的函数，都不要写箭头函数 ----- 例如：watch中的函数、computed中的函数
			2.所有不是被Vue所调（管理）的函数，都要写成箭头函数 --- 例如：定时器的回调、ajax的回调等等
			3.watch就是Vue给我提供的一个监测数据改变的手段，至于数据发生改变后，要做什么，得看具体的业务了逻辑。
				例如：
					需要新的值、旧的值作比较，决定接下来要干什么
					不要值，只要数据改变了，就要发请求等等
		-->
	<!-- 准备好一个容器-->
	<div id="root">
		姓：<input type="text" v-model="firstName"> <br /><br />
		名：<input type="text" v-model="lastName"><br /><br />
		<span>全名:{{fullName}}</span><br /><br />
	</div>

	<script type="text/javascript">
		const vm = new Vue({
			el: '#root',
			data: {
				firstName: '张',
				lastName: '三',
				fullName: ''
			},
			watch: {
				/* 
						1.watch中的firstName什么时候调用？data中的firstName被改变的时调用
						2.watch中的firstName的this是谁？---vm
				*/

				//监测姓-----精简写法
				/* firstName(newValue,oldValue){
					// console.log('firstName被别人改了',newValue,oldValue)
					this.fullName = newValue + '-' + this.lastName
				}, */

				//监测姓-----完整写法
				/* firstName:{
					immediate:true, //若immediate为true则handler在初始化时，就会调用一次，以后就看firstName的改变了
					handler(newValue,oldValue){
						this.fullName = newValue + '-' + this.lastName
					}
				}, */

				//监测名-----精简写法
				lastName(newValue, oldValue) {
					// console.log('firstName被别人改了',newValue,oldValue)
					this.fullName = this.firstName + '-' + newValue
				}
			}
		})

		vm.$watch('firstName', {
			immediate: true, //若immediate为true则handler在初始化时，就会调用一次，以后就看firstName的改变了
			handler(newValue, oldValue) {
				setTimeout(() => { //此处定时器的回调一定要写箭头函数
					this.fullName = newValue + '-' + this.lastName
				}, 1000)
			}
		})
		console.log(vm)
	</script>
</body>

</html>